<template>
    <div id="app">
        <router-view/>
        <mt-tabbar v-model="setbar2" :fixed="true" v-if="showbar">
            <mt-tab-item id="home">
                <div class="tabitem" @click="goto('home')">
                    <img slot="icon"  :src="setbar2=='home'?tabbar4a:tabbar4b">
                    <span>首页</span>
                </div>

            </mt-tab-item>
            <mt-tab-item id="applyPassport" >
                <div class="tabitem" @click="goto('applyPassport')">
                    <img slot="icon" :src="setbar2=='applyPassport'?tabbar1a:tabbar1b">
                     <span>申请</span>
                </div>
            </mt-tab-item>
            <mt-tab-item id="ApplyList">
                <div class="tabitem" @click="goto('ApplyList')">
                    <img slot="icon"  :src="setbar2=='ApplyList'?tabbar3a:tabbar3b">
                    <span>跟踪</span>
                </div>

            </mt-tab-item>
            <mt-tab-item id="CheckList">
                <div class="tabitem" @click="goto('CheckList')">
                    <img slot="icon"  :src="setbar2=='CheckList'?tabbar2a:tabbar2b">
                     <span>审核</span>
                </div>
            </mt-tab-item>
        </mt-tabbar >
        <span style="display: none">{{set3}}</span>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                setbar2:'home',
                selected: '外卖',
                tabbar1a:require('./assets/tabbar1a.png'),
                tabbar1b:require('./assets/tabbar1b.png'),
                tabbar2a:require('./assets/tabbar2a.png'),
                tabbar2b:require('./assets/tabbar2b.png'),
                tabbar3a:require('./assets/tabbar3a.png'),
                tabbar3b:require('./assets/tabbar3b.png'),
                tabbar4a:require('./assets/img/newHome2.png'),
                tabbar4b:require('./assets/img/newHome.png')
            };
        },
        created() {
            this.setbar2=this.setbar
        },
        computed:{
            set3(){
                let b =this.setbar;
                this.setbar2=this.setbar
                this.setSetbar(this.setbar2)
                return ''
            }
        },
        mounted() {
            // this.getData();
        },
        methods: {
            goto(name){
                this.setSetbar(name)
                this.$router.replace('/'+name)
            },
            // 获取 easy-mock 的模拟数据
            //A0038335 单单
            //A0037835 大成哥
            //A0000206 chengzhi
            getData() {
                this.loading = true
                const myData = {}
                this.$api.robList(myData).then((res) => {
                    console.log(res)
                    this.tableData = res.records //[1,2,3]
                    this.pageTotal = parseInt(res.totalCount)
                    this.loading = false
                }).catch((err) => {
                    console.log(err)
                    this.loading = false
                })
            },
        }
    };
</script>
<style>
    *{
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }
    input , textarea{
        -webkit-user-select:auto !important;
        user-select:auto !important;
    }
    .mint-tabbar>.mint-tab-item.is-selected{
        background: #fff !important;
    }
    .zhezhao{
        position: fixed;
        width: 100%;
        height: 100%;
        background:#000;
        opacity: 0.8;
        top: 0;
        left: 0;
        z-index: 1;

    }
    .mint-msgbox{
        z-index: 88!important;
    }
    .mint-tabbar{
        width: 100vw;
        overflow: hidden;
        position: fixed;
        left: 0;
        bottom: 0;
        height: 87px;
        background: #fff;
    }
    html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100vw;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: #ffffff;
    }

    * {
        box-sizing: inherit;

    &
    :before,

    &
    :after {
        box-sizing: inherit;
    }

    }
    img {
        width: 100%;
        height: auto;
        vertical-align: top;
        content: normal !important;
    }

    [aspectratio] {
        position: relative;
    }

    [aspectratio]::before {
        content: '';
        display: block;
        width: 1px;
        margin-left: -1px;
        height: 0;
    }

    [aspectratio-content] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    [flexContainer] {
        display: flex;
        width: 375px;
    }

    .block {
        margin-top: 15px;
    }

    ul, li {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }

    figure {
        display: block;
        margin: 0;
    }
    .tabitem
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 9px;
        margin-top: 17px;
    }
    .tabitem span{
        margin-top: 4px;
    }
    .tabitem img{
        width: 20px;
        height: 20px;
        margin-bottom: 5px;

    }
</style>
